<template>
    <div id="app">
        <!-- 面包屑 -->
        <div id="breadcrumb_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>库存管理</el-breadcrumb-item>
                <el-breadcrumb-item><span id="current">出库管理</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card>
            <el-row>
                <el-col :span="19">
                    <span style="font-size: 15px; color: #2c9678; font-weight: 700;">
                        出库单新建/查询
                    </span>
                </el-col>
                <el-col :span="3">
                    <el-button icon="el-icon-plus" id="add" @click="add_order()"
                        :disabled="!$store.state.current.isInventoryManage">
                        新增出库单
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-search" id="search" @click="search_order()">
                        查询
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <span style="font-size: 15px">所出仓库：</span>
                    <el-select v-model="inquire.warehouseName" placeholder="请选择" style="width: 150px">
                        <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName"
                            :value="item.warehouseName" @click.native="search_order()">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="7">
                    <span style="font-size: 15px">单据编号：</span>
                    <el-input v-model="inquire.rid" placeholder="请输入..." style="width: 250px"
                        @keyup.enter.native="search_order()"></el-input>
                </el-col>
                <el-col :span="10">
                    <span style="font-size: 15px">出库时间：</span>
                    <el-date-picker v-model="inquire.minTime" type="datetime" placeholder="选择日期时间" style="width: 200px">
                    </el-date-picker>
                    ---
                    <el-date-picker v-model="inquire.maxTime" type="datetime" placeholder="选择日期时间" style="width: 200px">
                    </el-date-picker>
                </el-col>
            </el-row>
        </el-card>

        <el-card>
            <!-- 表格区域 -->
            <div id="list">
                <el-table border stripe :header-cell-style="tableHeaderCellStyle" :cell-style="tableCellStyle"
                    tooltip-effect="dark" :data="showList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    @row-click="to_outbound_order_detail">
                    <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList"
                        :key="item.prop" align="center">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 分页页码 -->
        <div id="page_box">
            <el-pagination :current-page="currentPage" @current-change="handleCurrentChange"
                layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize" background
                hide-on-single-page>
            </el-pagination>
        </div>
    </div>
</template>

<script src="../../assets/js/admin/outbound_manage.js">
</script>

<style scoped src="../../assets/css/admin/manage.css">
</style>